<!--
 * @Author: Damon Liu
 * @Date: 2025-04-08 17:18:05
 * @LastEditors: Damon Liu
 * @LastEditTime: 2025-04-09 14:08:24
 * @Description: 
-->
<template>
    <div class="layout-ctn" @click="handleClick">
        <div style="display: flex; flex-wrap: wrap;">
            <TargetEl style="width: calc(10% - 2px) ;" v-for="(i) in 1000"></TargetEl>
        </div>
        
        <Tomato v-for="(node, nodeIndex) in list" :position="node.position" :key="node.id"></Tomato>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Tomato from '../../components/tomato.vue';
import TargetEl from '../../components/targetEl.vue';
const list = ref([]);
const handleClick = (event) => {
    console.log(event)
    // 如果不是由扔番茄引起的点击事件，则是人为的人点事件，新增一个番茄
    if (event.detail !== 1002) {
        list.value.push({
            id: event.timeStamp,
            position: {
                clientX: event.clientX, 
                clientY: event.clientY,
                pageX: event.pageX, 
                pageY: event.pageY
               // x: event.pageX, y: event.pageY
            }
        });
    }
}
</script>